<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动(float)学习</title>
    <link rel="stylesheet" href="./studyfloat.css">
</head>

<body>
    <div class="box">
        <span class="float-ele">
            浮动元素
        </span>
        普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
        普通文档流普通文档流普通文档流普通文档流普通文档流
    </div>
    <div style="border:4px solid blue;">
        <img src="./baidu/image/weiwei001.png" />
    </div>
    <div style="border:4px solid red;width:400px">
        <img style="border:4px solid yellow;float:left;" src="./baidu/image/weiwei001.png"/>
        我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!
        我是一个浮动元素!我是一个浮动元素!我是一个浮动元素!
    </div>
    <div style="border:4px solid blue;">
        <div style="width:200px;border:4px solid red;float:left;">
            我是浮动元素1
        </div>
        <div style="width:200px;border:4px solid yellow;float:left;">
            我是浮动元素2
        </div>
        <div style="clear: both;"></div>
    </div>
    <div style="border:4px solid gray;">我是页脚</div>
    <div style="border:4px solid blue; width:500px">
        <p>
            这是一行普通的文字,这里还有个<img style="float:left" src="./baidu/image/yuedong_logo.jpg">图片。这是第二行的数据哈哈.
        </p>
    </div>
</body>
</html>